import React, { Component } from "react";
import { connect } from "react-redux";
import { delTodo } from "@/store/action";
class TodoMain extends Component {
  render() {
    const { list, del } = this.props;
    return (
      <section className="main">
        <ul className="todo-list">
          {list.map((item) => (
            <li
              className={item.done ? "completed" : ""}
              key={item.id}
            >
              <div className="view">
                <label>{item.name}</label>
                <button
                  className="destroy"
                  onClick={() => del(item.id)}
                ></button>
              </div>
            </li>
          ))}
        </ul>
      </section>
    );
  }
}

const mapStateToProps = function (state) {
  console.log("观测一下", state);
  return {
    list: state.todos,
  };
};
const mapDispatchToProps = function (dispatch) {
  return {
    del(id) {
      // 异步删除某个事件，可以直接在代码中写这个，但是效果太差
      // 这个写法太不灵活，最好是在redux中间能自己实现这个效果
      // setTimeout(() => {
      //   dispatch(delTodo(id));
      // }, 1000);
      dispatch(delTodo(id));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoMain);
